<script lang="ts" setup>
import { useRouter } from '@/router';
import { onMounted, ref } from 'vue';
import { userCancel } from '@/api/user';
import { useAuthStore } from '@/store/auth';
import { useUserStore } from '@/store/user';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const router = useRouter();
const statusBarH = ref(0);
const checked = ref(false);
const userStore = useUserStore();
const authStore = useAuthStore();
const step = ref(1);
const reason = ref('');

function goBack() {
  uni.navigateBack();
}

function toStep2() {
  if (!checked.value) {
    uni.showToast({
      title: t('LRMKey_remoteAccountAgreeTips'),
      icon: 'none'
    });
    return;
  }
  step.value = 2;
}

async function submitCancel() {
  if (!reason.value) {
    uni.showToast({
      title: t('LRMKey_remoteAccountReasonPlaceholder'),
      icon: 'none'
    });
    return;
  }
  const res = await userCancel(reason.value);
  if (res.code == 0) {
    authStore.logout();
    userStore.setAvatar({
      detail: {
        avatarUrl: '/static/icon_not_logged_in.png'
      }
    });
    uni.navigateBack({
      delta: 2
    });
  } else {
    // res.message
    uni.showToast({
      title: res.message,
      icon: 'none'
    });
    return;
  }
}

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('LRMKey_remoteAccount')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  ></uni-nav-bar>
  <view class="cancel-contain">
    <view
      v-if="step == 1"
      :style="{ minHeight: 'calc(100vh - 44px - ' + statusBarH + 'px)' }"
      class="cancel-contain-step1"
    >
      <view class="cancel-contain-step1-title">{{ t('LRMKey_remoteAccountTips') }}</view>
      <view class="cancel-contain-step1-item">
        <view class="cancel-contain-step1-item-t">1.{{ t('LRMKey_remoteAccountInfo') }}</view>
        <view class="cancel-contain-step1-item-c">{{ t('LRMKey_remoteAccountInfoTips') }}</view>
      </view>
      <view class="cancel-contain-step1-item">
        <view class="cancel-contain-step1-item-t">2.{{ t('LRMKey_remoteAccountAsset') }}</view>
        <view class="cancel-contain-step1-item-c">{{ t('LRMKey_remoteAccountAssetTips') }}</view>
      </view>
      <view class="cancel-contain-step1-item">
        <view class="cancel-contain-step1-item-t">3.{{ t('LRMKey_remoteAccountTrade') }}</view>
        <view class="cancel-contain-step1-item-c">{{ t('LRMKey_remoteAccountTradeTips') }}</view>
      </view>
      <view class="cancel-contain-step1-item">
        <view class="cancel-contain-step1-item-t">4.{{ t('LRMKey_remoteAccountService') }}</view>
        <view class="cancel-contain-step1-item-c">{{ t('LRMKey_remoteAccountServiceTips') }}</view>
      </view>
      <view class="cancel-contain-step1-check">
        <uni-icons
          v-if="checked"
          color="#269c74"
          size="18"
          type="checkbox-filled"
          @click="checked = !checked"
        ></uni-icons>
        <uni-icons
          v-else
          color="#8a8a8a"
          size="18"
          type="circle"
          @click="checked = !checked"
        ></uni-icons>
        <text @click="checked = !checked">{{ t('LRMKey_remoteAccountAgree') }}</text>
      </view>
      <view class="cancel-contain-step1-btn">
        <view @click="toStep2">{{ t('LRMKey_remoteAccountApply') }}</view>
        <view @click="goBack">{{ t('LRMKey_noRemote') }}</view>
      </view>
    </view>

    <view
      v-if="step == 2"
      :style="{ minHeight: 'calc(100vh - 44px - ' + statusBarH + 'px)' }"
      class="cancel-contain-step2"
    >
      <view class="cancel-contain-step2-title">{{ t('LRMKey_remoteAccountReason') }}</view>
      <textarea
        v-model="reason"
        :placeholder="t('LRMKey_remoteAccountReasonTips')"
        auto-height
        placeholder-class="placeholder"
      />
      <view class="cancel-contain-step2-btn">
        <view @click="submitCancel">{{ t('LRMKey_remoteAccountApply') }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.cancel {
  &-contain {
    &-step1 {
      padding: 48rpx 32rpx 0;
      background: #ffffff;
      padding-bottom: 50rpx;
      padding-bottom: calc(constant(safe-area-inset-bottom) + 50rpx);
      padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);

      &-title {
        text-align: center;
        font-size: 40rpx;
        color: #3d3d3d;
        line-height: 56rpx;
        font-weight: 600;
      }

      &-item {
        margin-top: 40rpx;

        &-t {
          font-weight: 600;
          font-size: 26rpx;
          color: #3d3d3d;
          line-height: 36rpx;
        }

        &-c {
          font-weight: 400;
          font-size: 24rpx;
          color: #8c8c8c;
          line-height: 34rpx;
          margin-top: 20rpx;
        }
      }

      &-check {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #8a8a8a;
        line-height: 34rpx;
        margin-top: 162rpx;

        text {
          margin-left: 8rpx;
        }
      }

      &-btn {
        view {
          &:first-child {
            margin-top: 48rpx;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            border-radius: 100rpx;
            background: #269c74;
            font-weight: 500;
            font-size: 32rpx;
            color: #ffffff;
          }

          &:last-child {
            margin-top: 52rpx;
            text-align: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #269c74;
            line-height: 44rpx;
          }
        }
      }
    }

    &-step2 {
      background: #f4f4f4;
      padding: 32rpx 32rpx 0;

      &-title {
        margin-bottom: 24rpx;
        font-weight: 600;
        font-size: 36rpx;
        color: #3d3d3d;
        line-height: 50rpx;
      }

      textarea {
        padding: 32rpx;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 40rpx;
        background: #ffffff;
        border-radius: 20rpx;
        width: calc(100% - 64rpx);
        min-height: calc(280rpx - 64rpx);

        .placeholder {
          color: #adaeb0;
        }
      }

      &-btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        padding: 8rpx 0 72rpx;

        view {
          margin: 0 32rpx;
          height: 76rpx;
          line-height: 76rpx;
          border-radius: 76rpx;
          background: #269c74;
          font-weight: 500;
          font-size: 30rpx;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }
}
</style>
